<template>
	<view class="member-index bggray">
		
		<input type="text" v-model="accountNnumber" @input="inputEvent" maxlength="20" class="account-number" placeholder="请输入会员卡号">
		
		<view class="mb20 fwb">兑换须知</view>
		
		<view class="name-color aj">1.文字说明文字说明文字说明文字说明文字说明</view>



		<view class="btn-group-bom fs28">
			<view :class="['time-btn',{gradient:isPassed}]" @click="confirmExchange">确认兑换</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPassed:false,
				accountNnumber:'',
			}
		},
		components: {

		},
		onLoad(query) {},
		onShow() {},
		mounted() {},
		methods: {
			async vipRedeem(){
				const res = await this.$http({
					method: 'post',
					url: this.$api.vipRedeem,
					data: {
						number:this.accountNnumber
					},
				});
				this.$utils.showToast('兑换成功');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500)
				
			},
			inputEvent(e){
				this.isPassed = e.detail.value.length > 1 ? true : false;
			},
			confirmExchange(){
				if(this.isPassed) this.vipRedeem();
			},
		}
	}
</script>

<style lang="scss">
	.member-index {
		height: 100vh;
		padding: 20rpx 30rpx;
		
		.account-number{
			height:97rpx;
			background-color: #fff;
			border-radius: 11rpx;
			margin-bottom: 25rpx;
			padding:0 20rpx;
		}

		.btn-group-bom {
			position: absolute;
			width: 706rpx;
			bottom: 100rpx;
			left:50%;
			transform: translateX(-50%);
			
			.time-btn{
				@include operation-btn(100%,97rpx,#E2E3E7,#000,49rpx,0);
				font-weight: bold;
			}

			.gradient {
				color: #fff;
				background: linear-gradient(-90deg, #37A9FF, #6DFFFF);
			}
		}
	}
</style>